import React, { memo } from 'react'
import { HeaderWrapper } from './style'
import HeaderLeft from './header-left'
import HeaderCenter from './header-center'
import HeaderRight from './header-right'
import { useSelector, shallowEqual } from 'react-redux'
import classNames from 'classnames'


const Header = memo(() => {
  const {isFixed} = useSelector(state => ({
    isFixed: state.main.headerConfig.isFixed
  }), shallowEqual)
  return (
    <HeaderWrapper className={classNames({fixed: isFixed})}>
        <HeaderLeft/>
        <HeaderCenter/>
        <HeaderRight/>
    </HeaderWrapper>
  )
})

export default Header